<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>transitions过渡1</title>
        <style>
            div{
                width:100px;
                height:100px;
                background-color: darkgreen;
                color:white;
                transition-property: width;
                transition-duration: 2s;
                transition-timing-function: ease-in;
                transition-delay: 2s;
            }
            div:hover{width:300px;}
        </style>
    </head>
    <body>
        <div id="div1">你点我就膨胀了</div>
    </body>
</html>